<template>
  <div>
    <el-form class="left">
      <el-form-item label="频率">
        <el-input v-model="form.fre" type="number" @change="datachangeFun('fre')">
          <template #append>
            <el-select v-model="selectform.fre" @change="datachangeFun('fre')">
              <el-option
                v-for="unit in units"
                :key="unit.value"
                :label="unit.label"
                :value="unit.value"
              />
            </el-select>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="带宽">
        <el-input v-model="form.bandWidth" type="number" @change="datachangeFun('bandWidth')">
          <template #append>
            <el-select v-model="selectform.bandWidth" @change="datachangeFun('bandWidth')">
              <el-option
                v-for="unit in units"
                :key="unit.value"
                :label="unit.label"
                :value="unit.value"
              />
            </el-select>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="4">
        <el-button class="content-button" @click="addItem">添加</el-button>
        <span class="content-font">频率|带宽</span>
        <el-button class="content-button" @click="clear">清空</el-button>
        <el-button class="content-button">保存</el-button>
      </el-col>
      <el-col :span="20">
        <textarea
          v-model="freList"
          class="content-textarea"
          readonly
          rows="7"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script setup>

import { numToPlot, plotToNum } from '@/utils/utils';

const units = [
  'GHz',
  'MHz',
  'KHz',
  'Hz',
]
const freList = ref('')
const form = ref({
  fre: 200,
  bandWidth: 100,
})
const selectform = ref({
  fre: 'MHz',
  bandWidth: 'MHz',
})
const datachangeFun = (key) => {
  if (key) {
    formmatValue(key, form.value[key])
    return
  }
  Object.keys(form.value).forEach(key => {
    formmatValue(key, form.value[key])
  })
}
const formmatValue = (key, value) => {
  const unit = selectform.value[key]
  const valueNum = plotToNum(value + unit)
  const newFormVal = numToPlot(valueNum)
  if (newFormVal.search("KHz") != -1) {
    form.value[key] = newFormVal.replace('KHz', '')
    selectform.value[key] = 'KHz'
  } else if (newFormVal.search("MHz") != -1) {
    form.value[key] = newFormVal.replace('MHz', '')
    selectform.value[key] = 'MHz'
  } else if (newFormVal.search("GHz") != -1) {
    form.value[key] = newFormVal.replace('GHz', '')
    selectform.value[key] = 'GHz'
  }
}
const addItem = () => {
  const itemStr = `${form.value.fre + selectform.value.fre}|${form.value.bandWidth + selectform.value.bandWidth}\n`
  if (freList.value.includes(itemStr)) {
    return
  }
  freList.value += itemStr
}
const clear = () => {
  freList.value = ''
}

onMounted(() => {
  datachangeFun()
})
</script>
<style scoped>
.content-button {
  width: 85%;
  margin: 12px 2px;
}

.content-font {
  color: var(--scan-text-color)
}

.content-textarea {
  width: 79%;
  margin: 13px 8px;
  background: #01171e;
  border: 1px solid #00BFBF;
  color: var(--scan-text-color);
  padding: 0.5rem 1rem;
  resize: none;
}
</style>